<template>
  <div>
    <a href="https://www.fxpixels.site/tp5/public/index.php/backend/excel/articleout" download>
      <Button class="add" type="primary">
        <Icon type="ios-download-outline"></Icon>
        导出所有文章数据
      </Button>
    </a>
    <div class="table">
      <Table border :columns="columns3" :data="data3" ref="table"></Table>
    </div>
    <div class="page-bar">
      <Page :total="totalPage" :page-size="pageSize" show-total show-elevator @on-change="page"></Page>
    </div>
  </div>
</template>
<style>
  .table {
    margin-top: 30px;
  }

  .page-bar {
    margin-top: 25px;
    text-align: center;
  }

</style>
<script>
  export default {
    data() {
      return {
        totalPage: null,
        currentPage: null,
        pageSize: null,
        columns3: [{
            type: "selection",
            width: 50,
            align: "center"
          },
          {
            title: "文章ID",
            key: "id",
            render: (h, params) => {
              return h("div", [h("strong", params.row.id)]);
            },
            width: 90,
            align: "center",
            sortable: true
          },
          {
            title: "文章名",
            key: "title",
            width: 180
          },
          {
            title: "作者",
            key: "author",
            width: 120,
            align: "center"
          },
          {
            title: "类型",
            key: "category",
            width: 140,
            align: "center"
          },
          {
            title: "日阅读量",
            key: "today"
          },
          {
            title: "周阅读量",
            key: "week"
          },
          {
            title: "月阅读量",
            key: "mouth"
          },
          {
            title: "总阅读量",
            key: "readTotal"
          }
        ],
        data3: []
      };
    },
    methods: {
      getData(page) {
        setTimeout(function () {}, 200);
        var that = this;
        // console.log(page)
        this.$axios.get("backend/article", page || null, function (res) {
          // console.log(res);
          that.totalPage = res[2];
          that.pageSize = res[3];
          var data = res[0];
          that.data3 = [];
          for (var i = 0; i < data.length; i++) {
            let id = data[i].id;
            let title = data[i].title;
            let category = data[i].category;
            let author = data[i].user_id;
            let today = data[i].today_read;
            let week = data[i].week_read;
            let mouth = data[i].mouth_read;
            let readTotal = data[i].read_total;
            let article = {
              id: id,
              title: title,
              author: author,
              category: category,
              today: today,
              week: week,
              mouth: mouth,
              readTotal: readTotal
            };
            that.data3.push(article);
          }
        });
      },
      page(page) {
        this.currentPage = {
          page: page
        };
        this.$store.commit("c_page", page);
        this.getData(this.currentPage);
      }
    },
    mounted() {
      this.getData();
      this.$store.commit("bread", "文章与栏目统计");
    }
  };

</script>
